<template>
    <div class="app-container">
        <el-row style="margin-top: 5px">
            <el-col :span="12">
                <el-button>查询</el-button>
            </el-col>
            <el-col :span="12">
                <el-button icon="el-icon-search" type="primary" @click="queryExcelList">查询</el-button>
                <el-button icon="el-icon-download" type="primary" @click="exportExcelList">导出</el-button>
                <el-upload
                    class="upload-demo"
                    action="/system/pdf/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-remove="beforeRemove"
                    :limit="3"
                    :on-exceed="handleExceed">
                    <el-button size="small" type="primary">点击上传</el-button>
<!--                    <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>-->
                </el-upload>
            </el-col>
        </el-row>

        <el-row style="margin-top: 10px; margin-left: 10px">
            <el-col :span="24">
                <el-table
                    :data="tableData"
                    style="width: 100%"
                    height="350">
                    <el-table-column
                        fixed
                        prop="sid"
                        label="sid"
                        width="300">
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="sClass"
                        label="班级"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="gender"
                        label="性别"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        prop="age"
                        label="年龄"
                        width="120">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                    <el-table-column
                        :formatter="formatterTime"
                        prop="enrollmentDate"
                        label="入学日期"
                        width="150">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import {excelList, getExcelList, exportExcelList} from "@/api/system/excel";
import {uploadPdf} from "@/api/system/pdf";

import Treeselect from "@riophae/vue-treeselect";

export default {
    name: "Pdf",
    // dicts: ['sys_normal_disable', 'sys_user_sex'],
    // components: {Treeselect},
    data() {
        return {
            tableData: [],
            fileList: []
        };
    },
    watch: {},
    created() {

    },
    methods: {
        /** 查询列表 */
        queryExcelList() {
            this.loading = true;
            excelList().then(response => {
                    this.tableData = response.rows;
                }
            );
        },
        exportExcelList() {
            this.download('system/student/export', {
                // ...this.queryParams
            }, `role_${new Date().getTime()}.xlsx`)
        },
        // 截取时间 只展示年月日
        formatterTime(row, column) {
            let data = row[column.property]
            return /\d{4}-\d{1,2}-\d{1,2}/g.exec(data)
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${ file.name }？`);
        },
        handleUpload() {
            const formData = new FormData();
            formData.append('pdfFile', this.fileList[0].raw);
            formData.append('fileName', this.pdfInfo.fileName);
            formData.append('keywords', this.pdfInfo.keywords);
            // 这里可以使用axios等工具发送formData到后端
            // 假设使用axios
            // import axios from 'axios';
            // axios.post('/api/upload', formData, {
            //   headers: {
            //     'Content - Type':'multipart/form - data'
            //   }
            // })
            //.then(response => {
            //     this.handleSuccess(response);
            //   })
            //.catch(error => {
            //     this.handleError(error);
            //   });
        }
    }
};
</script>

<style>

</style>
